<template>
  <div>
    <el-card style="background-color: #F0FFFF;width: 100%" body-style="padding:0px">
      <div slot="header" class="card-header">
        <span>解析数据</span>
      </div>
      <div style="overflow-y: auto; height: 400px;">
        <el-table
          :data="tableData"
          style="width: 100%;"
          border
          size="mini"
          :row-style="{ height: '5px' }"
          :cell-style="{ padding: '0px' }"
        >
          <el-table-column
            v-for="column in columns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :cell-style="{ padding: '0px' }"
            :min-width="column.prop === '发生时间' ? 150 : undefined"
          />
        </el-table>
      </div>
    </el-card>
    <el-card style="background-color: #F0FFFF" body-style="padding:0px">
      <div slot="header">
        <span>筛选数据</span>
      </div>
      <div style="overflow-y: auto; height: 100px;">
        <el-table
          :data="tableData"
          style="width: 100%;"
          border
          size="mini"
          :row-style="{ height: '5px' }"
          :cell-style="{ padding: '0px' }"
        >
          <el-table-column
            v-for="column in columns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :cell-style="{ padding: '0px' }"
            :min-width="column.prop === '发生时间' ? 150 : undefined"
          />
        </el-table>
      </div>
    </el-card>
    <el-card style="background-color: #F0FFFF" body-style="padding:0px">
      <div slot="header">
        <span>定位结果</span>
      </div>
      <div style="overflow-y: auto;  height: 100px;">
        <el-table
          :data="result_tableData"
          style="width: 100%;"
          border
          size="mini"
          :row-style="{ height: '5px' }"
          :cell-style="{ padding: '0px' }"
        >
          <el-table-column
            v-for="column in result_col"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        { prop: '故障代码', label: '故障代码' },
        { prop: '故障名称', label: '故障名称' },
        { prop: '故障位码', label: '故障位码' },
        { prop: '故障等级', label: '故障等级' },
        { prop: '发生时间', label: '发生时间' },
        { prop: '机车速度', label: '机车速度' },
        { prop: '网压', label: '网压' },
        { prop: '原边电流', label: '原边电流' },
        { prop: '行驶方向', label: '行驶方向' },
        { prop: '级', label: '级' }
      ],
      result_col: [
        { prop: '序号', label: '序号' },
        { prop: '故障编号', label: '故障编号' },
        { prop: '故障名称', label: '故障名称' },
        { prop: '发生次数', label: '发生次数' },
        { prop: '建议', label: '建议' }
      ],
      tableData: [
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' },
        { 故障代码: '91', 故障名称: '四象限3A相上', 故障位码: '20 03 16', 故障等级: 'C', 发生时间: '2024-03-04 11：30：30', 机车速度: '0.0', 网压: '27136.0', 原边电流: '4.0', 行驶方向: '零位', 级: '0' }
      ],
      result_tableData: [
        { 序号: '1', 故障编号: '3196', 故障名称: '自动撒沙切除', 发生次数: '1', 建议: '1、在钥匙激活节显示屏-控制界面取消切除' },
        { 序号: '2', 故障编号: '3223', 故障名称: '过分相装置关闭', 发生次数: '4', 建议: '1、检查过分相装置故障输出信号线路 2.检查过分相装置控制箱' }
      ],
      text: 'HXD2 1051A正在解析...',
      progress: 6,
      customColor: '#409EFF'
    }
  },
  methods: {
    format(percentage) {
      return `${percentage}%`
    }
  }
}
</script>
<style>
.el-progress {
  width: 80%;
  margin: 0 auto;
}

.table-container {
  margin-top: 10px;
  border: 1px solid #dfe6ec; /* 可选，为滚动容器添加边框 */
}
.card-header {
  padding: 0px;
  height: 10px;
}
</style>
